﻿<div class="container">
  <div class="block-header">
    <h2>Photo Gallery <small>JQuery lightGallery is a lightweight jQuery lightbox gallery for displaying image and video gallery</small></h2>

    <ul class="actions">
      <li>
        <a href="">
          <i class="zmdi zmdi-trending-up"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="zmdi zmdi-check-all"></i>
        </a>
      </li>
      <li class="dropdown" dropdown>
        <a href="" dropdown-toggle>
          <i class="zmdi zmdi-more-vert"></i>
        </a>

        <ul class="dropdown-menu dropdown-menu-right">
          <li>
            <a href="">Refresh</a>
          </li>
          <li>
            <a href="">Manage Widgets</a>
          </li>
          <li>
            <a href="">Widgets Settings</a>
          </li>
        </ul>
      </li>
    </ul>

  </div>

  <div class="card">
    <div class="lv-header-alt clearfix m-b-5">
      <h2 class="lvh-label hidden-xs">19,453 Records</h2>

      <div class="lvh-search" data-ng-if="mactrl.listviewSearchStat" data-ng-click="mactrl.listviewSearchStat">
        <input type="text" placeholder="Start typing..." class="lvhs-input">

        <i class="lvh-search-close" data-ng-click="mactrl.listviewSearchStat = false">&times;</i>
      </div>

      <ul class="lv-actions actions">
        <li>
          <a href="" data-ng-click="mactrl.listviewSearchStat = true">
            <i class="zmdi zmdi-search"></i>
          </a>
        </li>
        <li>
          <a href="">
            <i class="zmdi zmdi-time"></i>
          </a>
        </li>
        <li class="dropdown" dropdown="">
          <a href="" dropdown-toggle="" aria-expanded="false" aria-haspopup="true">
            <i class="zmdi zmdi-sort"></i>
          </a>

          <ul class="dropdown-menu dropdown-menu-right">
            <li>
              <a href="">Last Modified</a>
            </li>
            <li>
              <a href="">Last Edited</a>
            </li>
            <li>
              <a href="">Name</a>
            </li>
            <li>
              <a href="">Date</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="">
            <i class="zmdi zmdi-info"></i>
          </a>
        </li>
        <li class="dropdown" dropdown="">
          <a href="" dropdown-toggle="" aria-expanded="false" aria-haspopup="true">
            <i class="zmdi zmdi-more-vert"></i>
          </a>

          <ul class="dropdown-menu dropdown-menu-right">
            <li>
              <a href="">Refresh</a>
            </li>
            <li>
              <a href="">Settings</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="card-body card-padding" data-ng-controller="photoCtrl as phctrl">

      <ul class="p-grid">
        <li data-ng-repeat="w in phctrl.photoOptions" data-ng-click="phctrl.photoGrid(w.value)" data-ng-class="{ 'active' : phctrl.photoColumnSize === w.value }">{{ w.column }}</li>
      </ul>

      <div class="lightbox photos">

        <div data-src="media/gallery/1.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/1.jpg" alt="" />
          </div>
        </div>

        <div data-src="media/gallery/2.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/2.jpg" alt="" />
          </div>
        </div>

        <div data-src="media/gallery/3.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/3.jpg" alt="" />
          </div>
        </div>

        <div data-src="media/gallery/4.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/4.jpg" alt="" />
          </div>
        </div>

        <div data-src="media/gallery/5.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/5.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/6.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/6.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/7.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/7.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/8.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/8.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/9.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/9.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/10.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/10.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/11.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/11.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/12.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/12.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/13.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/13.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/14.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/14.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/15.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/15.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/16.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/16.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/17.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/7.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/18.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/18.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/19.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/19.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/20.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/20.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/21.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/21.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/22.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/22.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/23.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/23.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/24.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/24.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/1.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/1.jpg" alt="" />
          </div>
        </div>

        <div data-src="media/gallery/2.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/2.jpg" alt="" />
          </div>
        </div>

        <div data-src="media/gallery/3.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/3.jpg" alt="" />
          </div>
        </div>

        <div data-src="media/gallery/4.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/4.jpg" alt="" />
          </div>
        </div>

        <div data-src="media/gallery/5.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/5.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/6.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/6.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/7.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/7.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/8.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/8.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/9.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/9.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/10.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/10.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/11.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/11.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/12.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/12.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/13.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/13.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/14.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/14.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/15.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/15.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/16.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/16.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/17.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/7.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/18.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/18.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/19.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/19.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/20.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/20.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/21.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/21.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/22.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/22.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/23.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/23.jpg" alt="" />
          </div>
        </div>
        <div data-src="media/gallery/24.jpg" class="{{ phctrl.photoColumn }} col-sm-4 col-xs-6">
          <div class="lightbox-item p-item">
            <img src="media/gallery/thumbs/24.jpg" alt="" />
          </div>
        </div>
      </div>

      <div class="clearfix"></div>

      <div class="load-more m-t-30">
        <a href=""><i class="zmdi zmdi-refresh-alt"></i> Load More...</a>
      </div>
    </div>
  </div>
</div>
